import { Alert,Space,Button,Radio} from "antd"
import { DeleteOutlined, SettingOutlined } from "@ant-design/icons"
import { Fragment,useState } from "react"
import "./index.css"
import ali_Logo from "../../../assset/ali_Logo.png"
import Wehcat_Logo from "../../../assset/Wehcat Logo.png"
import 银联 from "../../../assset/银联 Logo.png"
import 易宝 from "../../../assset/易宝 Logo.png"

const PayType = ()=>{

    const [value, setValue] = useState(1);

    const onChange = (e:any) => {
      console.log('radio checked', e.target.value);
      setValue(e.target.value);
    };

    return (
        <Fragment>
        <Alert
        message="注：该支付方式启用并不能正常使用，需要开通支付功能才能使用响应的支付方式"
        // description="该支付方式启用并不能正常使用，需要开通支付功能才能使用响应的支付方式"
        type="info"
        showIcon
        style={{
            paddingLeft:'30%',    
            border:'1px solid #ccc',
            fontSize: 12,
        }}
        action={
          <Space>
          </Space>
        }
        closable
      />
      <div id='banner'>
        <b className="bannerB">支付方式</b>
      </div>
      <div id="pay">
        <div className="payType1 payType">
            <img src={ali_Logo} alt="" width={120}/>
            <div className="describe">
            支付宝（中国）网络技术有限公司是国内领先的第三方支付平台，致力于提供“简单、安全、快速”的支付解决方案
            </div>
            <div className="radio">
                <Radio.Group onChange={onChange} value={value}>
                    <Radio value={1}>启用</Radio>
                    <Radio value={2}>关闭</Radio>
                </Radio.Group>
            </div>
            <div className="button">
                <Button 
                style={{backgroundColor: 'rgb(115,209,61)',borderRadius: '5px',border:"none"}}
                icon={<SettingOutlined />}
                type="primary"
                className="setting">设置</Button>
                <Button
                style={{backgroundColor: 'rgb(253,77,70)',borderRadius: '5px',border:"none"}}
                icon={<DeleteOutlined />}
                type="primary"
                className="del">删除</Button>
            </div>
        </div>
        <div className="payType2 payType">
            <img src={Wehcat_Logo} alt="" width={120}/>
            <div className="describe">
            微信（中国）网络技术有限公司是国内领先的第三方支付平台，致力于提供“简单、安全、快速”的支付解决方案
            </div>
            <div className="radio">
                <Radio.Group onChange={onChange} value={value}>
                    <Radio value={1}>启用</Radio>
                    <Radio value={2}>关闭</Radio>
                </Radio.Group>
            </div>
            <div className="button">
                <Button 
                style={{backgroundColor: 'rgb(115,209,61)',borderRadius: '5px',border:"none"}}
                icon={<SettingOutlined />}
                type="primary"
                className="setting">设置</Button>
                <Button
                style={{backgroundColor: 'rgb(253,77,70)',borderRadius: '5px',border:"none"}}
                icon={<DeleteOutlined />}
                type="primary"
                className="del">删除</Button>
            </div>
        </div>
        <div className="payType3 payType">
            <img src={银联} alt="" width={120}/>
            <div className="describe">
            银联（中国）网络技术有限公司是国内领先的第三方支付平台，致力于提供“简单、安全、快速”的支付解决方案
            </div>
            <div className="radio">
                <Radio.Group onChange={onChange} value={value}>
                    <Radio value={1}>启用</Radio>
                    <Radio value={2}>关闭</Radio>
                </Radio.Group>
            </div>
            <div className="button">
                <Button 
                style={{backgroundColor: 'rgb(115,209,61)',borderRadius: '5px',border:"none"}}
                icon={<SettingOutlined />}
                type="primary"
                className="setting">设置</Button>
                <Button
                style={{backgroundColor: 'rgb(253,77,70)',borderRadius: '5px',border:"none"}}
                icon={<DeleteOutlined />}
                type="primary"
                className="del">删除</Button>
            </div>
        </div>
        <div className="payType4 payType">
            <img src={易宝} alt="" width={120}/>
            <div className="describe">
            易宝（中国）网络技术有限公司是国内领先的第三方支付平台，致力于提供“简单、安全、快速”的支付解决方案
            </div>
            <div className="radio">
                <Radio.Group onChange={onChange} value={value}>
                    <Radio value={1}>启用</Radio>
                    <Radio value={2}>关闭</Radio>
                </Radio.Group>
            </div>
            <div className="button">
                <Button 
                style={{backgroundColor: 'rgb(115,209,61)',borderRadius: '5px',border:"none"}}
                icon={<SettingOutlined />}
                type="primary"
                className="setting">设置</Button>
                <Button
                style={{backgroundColor: 'rgb(253,77,70)',borderRadius: '5px',border:"none"}}
                icon={<DeleteOutlined />}
                type="primary"
                className="del">删除</Button>
            </div>
        </div>


      </div>
        </Fragment>
    )
}

export default PayType